import QtQuick
import QtQuick.Controls

Item {
    property real buttonWidth : 150    // 整体背景宽度
    property real buttonHeight : 70       // 整体背景高度
    property real buttonRadius: 5       // 按钮圆角
    property real buttonBorder: 1       // 按钮边框线条
    property string buttonBorderColor: "black"  // 边框线条颜色
    // property string pressedColor: "red"     // 按下颜色
    // property string releasedColor: "white"  // 释放颜色

    // property bool clickedEnable: false      // 单机状态使能
    // property bool buttonClickedState: false         // 按钮点击状态

    property var pressedColor : pressedState        // 按下颜色
    property var releasedColor: releasedState       // 释放颜色
    property var gradientColor : releasedState

    property string buttonContent       // 按钮显示文本内容
    property string contentColor: "black"   // 按钮文字显示颜色
    property real fontSize: 30      // 显示文本内容大小

    Gradient{
        id:pressedState
        GradientStop{ position:  0.0 ; color: "#7d9998"}
        GradientStop{ position:  0.2 ; color: "#034f43"}
        GradientStop{ position:  0.4 ; color: "#026a53"}
        GradientStop{ position:  0.6 ; color: "#008968"}
        GradientStop{ position:  0.8 ; color: "#00a680"}
    }
    Gradient{
        id:releasedState
        GradientStop{ position:  0.0 ; color: "#6d7a80"}
        GradientStop{ position:  0.2 ; color: "#263437"}
        GradientStop{ position:  0.4 ; color: "#424b50"}
        GradientStop{ position:  0.6 ; color: "#576065"}
        GradientStop{ position:  0.8 ; color: "#676b74"}
    }

    signal buttonClicked()

    signal buttonPressed()      //  按下信号
    signal buttonReleased()     //  释放信号

    width: buttonWidth
    height: buttonHeight

    Rectangle{
        id:buttonBack
        anchors.fill: parent
        radius: buttonRadius
        border.width: buttonBorder
        border.color: buttonBorderColor
        // color: releasedColor

        gradient: gradientColor



        Text{
            anchors.centerIn: parent
            font.pixelSize:fontSize
            font.bold: true
            color: contentColor
            text: buttonContent
        }

        MouseArea{
            anchors.fill: parent

            onPressed: {
                // parent.color = pressedColor
                buttonPressed()
                // parent.gradient = pressedState
            }

            onReleased: {
                // parent.color = releasedColor
                buttonReleased()
                // parent.gradient = releasedState
            }
        }

    }





}
